<template>
<div class="page Publicstore">
  <div class="flex-row sp-box">
    <div :style="`background: url(./img/sp1.png) center center / 100% 100%;`">
      <div>机柜</div>
      <div style="font-weight: bold;">{{ info.terminalCount || '无' }}</div>
    </div>
    <div :style="`background: url(./img/sp2.png) center center / 100% 100%;`">
      <div>充电宝</div>
      <div style="font-weight: bold;">{{ info.chargerCount || '无' }}</div>
    </div>
  </div>
  <div style="margin: 1.11rem 16px 0;">
    <van-button block type="info" @click="$router.push({ name: 'Store-Apply' })">申请出库</van-button>
  </div>
  <div style="margin: 0.8rem 16px 0;">
    <van-button block type="info" @click="$router.push({ name: 'Store-Record' })">申请记录</van-button>
  </div>
  <div style="margin: 0.8rem 16px 0;">
    <van-button block type="info" @click="$router.push({ name: 'Store-Detail' })">查看设备</van-button>
  </div>
  <router-view @reloadList="getInfo"></router-view>
</div>
</template>

<script>
export default {
  data() {
    return {
      info: {}
    };
  },
  methods: {
    getInfo() {
      this.$axios.get('/api/bjk/bjkCount', { 
        page: 1, size: 10 
      }).then(res => {
        let json = res || {};
        let list = json.list || [];
        if (list.length) this.info = list[0];
      });
    }
  },
  mounted() { 
    if (this.$route.name == 'Publicstore') this.getInfo();
  }
};
</script>

<style lang="less">
.Publicstore {
  .sp-box {
    box-sizing: border-box; 
    padding: 0.4rem; 
    background: #fff;
    & > div {
      width: 4.4rem; 
      height: 1.6rem;
      border-radius: 0.13rem;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      justify-content: space-between;
      padding: 0.2rem 0.5rem;
      font-size: 14px;
    }
  }
}
</style>
